<template>
  <div>
    <el-header>
      <el-form :inline="true" :model="searchForm">
        <el-form-item>
          <el-input v-model="searchForm.name" placeholder="请输入账号"></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getData(1)">查询</el-button>
          <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
          <el-button icon="el-icon-plus" type="success" @click="addUser">新增用户</el-button>
        </el-form-item>
      </el-form>
    </el-header>


    <el-main>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="name"
          label="账号">
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色">
          <template slot-scope="scope">
            <el-tag :type="getRoleTag(scope.row.role)" effect="dark" size="mini">
              {{ scope.row.role }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-footer>
      <el-pagination
        small
        layout="prev, pager, next"
        :total="totalPage" :page-size="pagesize" @current-change="getData">
      </el-pagination>
    </el-footer>

    <el-drawer
      title="添加用户"
      :visible.sync="drawerVisible"
      direction="rtl"
      :before-close="handleClose">
      
      <el-container style="display: flex;justify-content: center;">
        <el-form ref="form" :model="form" :rules="rules" label-position="top" style="width: 80%;" size="small">
          <el-form-item label="用户账号" prop="name"> 
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" v-if="hidePasswd">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="repassword" v-if="hidePasswd">
            <el-input type="password" v-model="form.repassword"></el-input>
          </el-form-item>
          <el-form-item label="用户角色" prop="role">
            <el-select v-model="form.role" placeholder="请选择用户角色" style="width: 100%;" clearable>
              <el-option label="管理员" value="管理员"></el-option>
              <el-option label="操作员工" value="操作员工"></el-option>
              <el-option label="普通员工" value="普通员工"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">{{ btn }}</el-button>
            <el-button @click="handleClose">取消</el-button>
          </el-form-item>
        </el-form>
      </el-container>

    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'UserPage',
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      btn: '立即添加',
      hidePasswd: true,
      drawerVisible:false,
      pagesize: 20,
      totalPage: 0,
      searchForm:{
        name: '',
        type: '',
      },
      form: {
        id:null,
        name: '',
        password:'',
        repassword:'',
        role: '',
        status:1
      },
      tableData: [{
        name: '王小虎',
        role: '管理员',
        status: true,
      },
      {
        role: '操作员工',
        name: '张三',
        status: 0,
      },
      {
        role: '普通员工',
        name: '李四',
        status: 0,
      }],
      rules: {
        name: [
          { required: true,message:'请输入账户', trigger: 'blur' }
        ],
        password: [
          { required: true, message:'请输入密码', trigger: 'blur' }
        ],
        repassword: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        role: [
          { required: true, message:'请选择用户角色', trigger: 'blur' }
        ],
      }

    }
  },
  mounted() {
    this.getData(1)
  },
  methods: {
    getData(val) {
      this.$http.get('/user/get?page=' + val + '&name=' + this.searchForm.name).then((res) => {
        if (res.data.code == 200) {
          this.totalPage = res.data.total
          this.tableData = res.data.data
        }
        if (this.loading) {
          this.loading = false
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    addUser(){
      this.hidePasswd =true
      this.drawerVisible =true
    },
    reset() {
      this.searchForm = {
        name: ''
      }
    },
    handleClose(){
      this.drawerVisible=false
    },
    getRoleTag(role){
      if(role=='管理员'){
        return ''
      }else if(role=='操作员工'){
        return 'success'
      }else{
        return 'info'
      }
    },
    onSubmit() {
      this.drawerVisible = false
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$http.post('/user/add', this.form).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: this.hidePasswd ? '添加成功!' : '编辑成功'
              });
              this.getData(1)
              this.resetForm()
            }
          }).catch((err) => {
            console.log(err)
          })

        } else {
          console.log('提交出错!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs['form'].resetFields();
    },
    handleClick(data) {
      this.btn = '编辑'
      Object.assign(this.form, data)
      this.hidePasswd = false
      this.drawerVisible = true
    },
    handleDelete(data) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/user/delete', { id: data.id }).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getData(1)
          }
        }).catch((err) => {
          console.log(err)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
}
</script>

<style scoped>


</style>
